<template>
	<view class="container">
		<view class="nav">
			<view class="navItem" :class="navIndex == index ? 'navActive':''" v-for="(item,index) in navList" :key="index" @tap="navClick(index)">{{item.resource}}</view>
		</view>
		<view class="navCont">
			<view class="contItem" v-for="(item,index) in contList" :key="index">
				<view class="contType">
					<view class="circle circle-default" :class="item.typeIndex == 1 ? 'circle-task' : item.typeIndex == 2 ? 'circle-test' : item.typeIndex == 3 ? 'circle-resource' : 'circle-course'">{{item.type}}</view>
					<view class="name">{{item.resource_name}}</view>
				</view>
				<view class="btn" @click="check(item.typeIndex,item.resource_id)" v-if="package_log_id">查看详情</view>
				<view class="btn" @click="check(item.typeIndex,item.resource_id)" v-else>查看资源</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: ['全部', '题库', '作业库', '套卷', '资源', '名课'],
				navIndex: 0,
				contList: [],
				package_id:"",
				section_id:'',
				package_log_id:'',
				package_type:'',
			}
		},
		onLoad(e) {
			this.package_id=e.package_id;
			this.section_id=e.section_id;
			this.package_type=e.package_type;
			if (e.package_log_id) {
				this.package_log_id = e.package_log_id;
			}
			this.getNav();
		},
		methods: {
			getNav() {
				this.$papi.apiPost('moblie/resourceType/infos').then(res => {
					if (res.data.code == 200) {
						this.navList = res.data.data;
						this.navList.unshift({
							unid: '',
							resource: '全部'
						})
						this.getList();
					}
				})
			},
			// 选项卡切换
			navClick(index) {
				this.navIndex = index;
				this.contList = [];
				this.getList();
			},
			// 获取内容列表
			getList() {
				var data = {
					package_id: this.package_id,
					section_id: this.section_id,
					package_type:this.package_type
				}
				if (this.navIndex > 0) {
					data.type_id = this.navList[this.navIndex].unid
				}
				this.$papi.apiPost('moblie/sectionResource/infos', data).then(res => {
					if (res.data.code == 200 && res.data.data) {
						var lists = res.data.data;
						for (var i = 0; i < lists.length; i++) {
							for (var j = 0; j < this.navList.length; j++) {
								if (lists[i].type_id == this.navList[j].unid) {
									lists[i].typeIndex = j;
								}
							}
						}
						this.contList = lists;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			check(typeIndex,resource_id) {
				if (this.package_log_id) {
					uni.navigateTo({
						url: 'all?package_log_id=' + this.package_log_id + '&id=' + resource_id + '&type=' + typeIndex
					})
				} else {
					if (typeIndex == 1 || typeIndex == 2) {
						uni.navigateTo({
							url: 'chapterDetail?type='+typeIndex+'&id='+resource_id
						})
					} else if (typeIndex == 3) {
						this.$zapi.apiPost('user/resources.lists/Reslists',{tid:resource_id}).then(res => {
							if(res.data.code == 200 && res.data.data.data.length > 0) {
								var detail = res.data.data.data[0];
								uni.navigateTo({
									url: '../tongbu/resources_Detail?tid='+detail.tid+'&name='+detail.files_name+'&type='+detail.files_type+'&num='+detail.star_num
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAFA;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
	}

	.navItem {
		color: #333333;
		font-size: 32upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 100upx;
	}

	.navActive {
		font-size: 42upx;
	}

	.navActive::after {
		content: '';
		width: 56upx;
		height: 8upx;
		background: #FF9900;
		margin-top: -8upx;
	}

	.navCont {
		position: absolute;
		top: 130upx;
		left: 30upx;
		width: 690upx;
	}

	.contItem {
		padding: 24upx 20upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		border-radius: 8upx;
	}

	.contType {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.circle {
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
		margin-right: 20upx;
		text-align: center;
		line-height: 70upx;
		color: #FFFFFF;
		font-size: 26upx;
	}

	.circle-default {
		background-color: #FFB800;
	}

	.circle-task {
		background-color: #FF5722;
	}

	.circle-test {
		background-color: #00D5A2;
	}

	.circle-resource {
		background-color: #FF4E78;
	}

	.circle-course {
		background-color: #A665F8;
	}

	.name {
		color: #333333;
		font-size: 32upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 400upx;
	}

	.time {
		color: #999999;
		font-size: 26upx;
	}

	.btn {
		color: #FFFFFF;
		font-size: 26upx;
		line-height: 1;
		padding: 14upx 30upx;
		background-color: #FF9900;
		border-radius: 46upx;
	}
</style>
